<!--订单详情页面-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - #${order.id}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/purchase.css">
</head>
<body>
<header class="dashboard-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-0"><i class="bi bi-bicycle"></i> 电动车销售管理系统</h1>
                <p class="mb-0 opacity-75">业务员工作台</p>
            </div>
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <span class="d-none d-md-inline">${currentSalesman.name}</span>
                    <div class="badge bg-light text-dark">
                        <i class="bi bi-person-circle me-1"></i> 业务员
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
                        <i class="bi bi-gear fs-5"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/changePassword"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="logout"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-0"><i class="bi bi-file-text me-2"></i>订单详情</h2>
            <p class="text-muted mb-0">进车订单 #${order.id} 的详细信息</p>
        </div>
        <div>
            <a href="${pageContext.request.contextPath}/purchase/list" class="btn btn-light">
                <i class="bi bi-arrow-left me-1"></i> 返回列表
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h5 class="card-title">订单信息</h5>
                            <p class="card-subtitle text-muted">采购订单详情</p>
                        </div>
                        <div>
                                <span class="status-badge ${order.status == 0 ? 'status-pending' : 'status-approved'}">
                                    ${order.status == 0 ? '待审核' : '已审核'}
                                </span>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="detail-item">
                                <span class="detail-label">订单ID:</span>
                                <span class="detail-value">#${order.id}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-item">
                                <span class="detail-label">创建时间:</span>
                                <span class="detail-value">${order.createTime}</span>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="detail-item">
                                <span class="detail-label">业务员:</span>
                                <span class="detail-value">${order.salesman.name}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-item">
                                <span class="detail-label">联系电话:</span>
                                <span class="detail-value">${currentSalesman.phone}</span>
                            </div>
                        </div>
                    </div>

                    <div class="detail-item mb-4">
                        <span class="detail-label">订单备注:</span>
                        <span class="detail-value">无</span>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-4">车辆信息</h5>

                    <div class="vehicle-details">
                        <div class="row align-items-center mb-4">
                            <div class="col-md-4">
                                <img src="${pageContext.request.contextPath}/images/vehicles/${order.vehicle.pic}"
                                     class="img-fluid rounded" alt="${order.vehicle.brand}">
                            </div>
                            <div class="col-md-8">
                                <h4>${order.vehicle.brand} ${order.vehicle.model}</h4>
                                <div class="row mt-3">
                                    <div class="col-6">
                                        <div class="detail-item">
                                            <span class="detail-label">颜色:</span>
                                            <span class="detail-value">${order.vehicle.color}</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="detail-item">
                                            <span class="detail-label">生产年份:</span>
                                            <span class="detail-value">${order.vehicle.productionYear}</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="detail-item">
                                            <span class="detail-label">单价:</span>
                                            <span class="detail-value">¥${order.vehicle.price}</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="detail-item">
                                            <span class="detail-label">数量:</span>
                                            <span class="detail-value">${order.quantity} 辆</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="specifications">
                            <h6 class="mb-3">车辆规格</h6>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="spec-item">
                                        <i class="bi bi-speedometer2 me-2"></i>
                                        <span>最高时速: 220km/h</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="spec-item">
                                        <i class="bi bi-fuel-pump me-2"></i>
                                        <span>油耗: 7.5L/100km</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="spec-item">
                                        <i class="bi bi-gear me-2"></i>
                                        <span>变速箱: 自动</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="spec-item">
                                        <i class="bi bi-ev-station me-2"></i>
                                        <span>发动机: 2.0T</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="spec-item">
                                        <i class="bi bi-people me-2"></i>
                                        <span>座位数: 5座</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="spec-item">
                                        <i class="bi bi-palette me-2"></i>
                                        <span>车身颜色: ${order.vehicle.color}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-4">订单金额</h5>

                    <div class="order-summary">
                        <div class="summary-item">
                            <span>车辆单价:</span>
                            <span>¥${order.vehicle.price}</span>
                        </div>
                        <div class="summary-item">
                            <span>采购数量:</span>
                            <span>${order.quantity}</span>
                        </div>
                        <div class="summary-item">
                            <span>小计:</span>
                            <span>¥${order.quantity * order.vehicle.price}</span>
                        </div>
                        <div class="summary-item">
                            <span>运输费用:</span>
                            <span>¥0.00</span>
                        </div>
                        <div class="summary-item">
                            <span>税费:</span>
                            <span>¥0.00</span>
                        </div>
                        <hr>
                        <div class="summary-item total">
                            <span>总计:</span>
                            <span>¥${order.quantity * order.vehicle.price}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-4">订单操作</h5>

                    <div class="d-grid gap-2">
                        <c:if test="${order.status == 0}">
                            <a href="${pageContext.request.contextPath}/purchase/edit?id=${order.id}"
                               class="btn btn-warning">
                                <i class="bi bi-pencil me-1"></i> 编辑订单
                            </a>
                            <a href="${pageContext.request.contextPath}/purchase/delete?id=${order.id}"
                               class="btn btn-danger delete-btn">
                                <i class="bi bi-trash me-1"></i> 删除订单
                            </a>
                        </c:if>

                        <button class="btn btn-outline-secondary">
                            <i class="bi bi-printer me-1"></i> 打印订单
                        </button>

                        <button class="btn btn-outline-primary">
                            <i class="bi bi-download me-1"></i> 导出PDF
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/js/purchase.js"></script>
</body>
</html>